<template>
  <div class="content">
    <button @click="flag = !flag">switch</button>

    <transition :duration="{enter: 2000, leave: 5000}" leave-active-class="animate__animated animate__backOutDown" enter-active-class="animate__backOutUp" name="fade">
      <div v-if="flag" class="box"></div>
    </transition>
    
  </div>
</template>

<script setup lang="ts">
import "animate.css"
import Layout from "./Layout/index.vue"
import { ref } from "vue"

const flag = ref<boolean>(true)

</script>

<style lang="scss" scoped>
  .box {
    width: 200px;
    height: 200px;
    background-color: red;
  }
</style>